.gradient-0_8(@from: top, @to: bottom){
  background-image: -webkit-linear-gradient(@from, rgba(0,0,0,0) 0, rgba(0,0,0,.08) 100%);
  background-image: linear-gradient(to @to, rgba(0,0,0,0) 0, rgba(0,0,0,.08) 100%);
}
.gradient-0_6(@from: top, @to: bottom){
  background-image: -webkit-linear-gradient(@from, rgba(0,0,0,0) 0, rgba(0,0,0,.06) 100%);
  background-image: linear-gradient(to @to, rgba(0,0,0,0) 0, rgba(0,0,0,.06) 100%);
}
.gradient_nomal(@from: top, @to: bottom){
  background-color: #d5d5d5;
  background-image: -webkit-linear-gradient(@from,#ebebeb 0,#dfdfdf 100%);
  background-image: linear-gradient(to @to,#ebebeb 0,#dfdfdf 100%);
}
.gradient_hover(@from: top, @to: bottom){
  background-color: #eaeaea;
  background-image: -webkit-linear-gradient(@from,#efefef 0,#e5e5e5 100%);
  background-image: linear-gradient(to @to,#efefef 0,#e5e5e5 100%);
}
// --------------------------- 以上为 本文件中 私有方法， 不在其他文件中调用
.opacity(@opa: 50){
  filter: alpha(opacity=@opa);
  opacity: @opa/100;
}
// datepicker 中颜色
@date-select-bg: #a9e9ad;
@week-bg: #65a4f3;// 周末显示时背景
@wwday-color: #65a4f3;// 周末高亮时字体
// ------- 正文字号、字体
@font-size: 12px;
@font-l-size: 14px;
@font: ~"@{font-size}/1.5" "tahoma", "arial", "Hiragino Sans GB", "\5b8b\4f53", "sans-serif";
// 边框（size、圆角）
@border-size: 1px;
@border-radius: 5px;
// 普通
@color: #000;
@color-light: #999;
@bg: #fff;
@border-c: #ccc;
// 悬停
@hover-color: #000;
@hover-bg: #f3f3f3;
@hover-border-c: #ccc;
// 选中
@sel-color: #fff;
@sel-bg: #0092dc;
@sel-border-c: #0070a9;
// 禁用 -- 透明度 为.5
@disable-color: #929292;
@disable-bg: #e9e9e9;
.disabled(){ .opacity(50);}
// ------- 标题（accordion、datagrid、dialog、dividedbox、datepicker）
@title-color: #575765;
@title-bg: #f5f5f5;
@title-padding: 5px;
// ------- 工具栏
@tool-color: #808080;// 工具栏（datagrid、menu、datepicker）
@tool-hover-color: #333;
@tool-bg: #fafafa;
// 正文容器的 padding
@cont-padding: 10px;
// 文字阴影（carousel 中 arrow）
@text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
// 遮罩层颜色
@mask-color: rgba(0, 0, 0, .15);
//边框发散（聚焦）
.box-shadow(){
  -moz-box-shadow: 2px 2px 10px 0 rgba(128,128,128,0.3);
  -webkit-box-shadow: 2px 2px 10px 0 rgba(128,128,128,0.3);
  box-shadow: 2px 2px 10px 0 rgba(128,128,128,0.3);
}
// resize 时跟随的 bar
@followbar-color: #bfbfbf;
// 高亮
@highlight-c: #0C970C;
@highlight-bg-c: #333;
@highlight-bg: #ffd256;
// 外部发散（dialog 边界）
@outline-color: #c5c5c5;
.outline {
  outline: 0;
  -moz-box-shadow: 0 0 4px 1px @outline-color;
  -webkit-box-shadow: 0 0 4px 1px @outline-color;
  box-shadow: 0 0 4px 1px @outline-color;
}
// 滚动条占位宽度
@scroll-w: 17px;
// ------- 文本类 表单元素
// 字号大小改变时可能改变 input 的高度，需同步修改
@textinput-h: 23px;
@textinput-color: @color;
@textinput-bg: @bg;
@textinput-padding: 2px;
@input-border: solid @border-size @border-c;
.textinput(){
  color: @textinput-color;
  background-color: @textinput-bg;
  border: @input-border;
  padding: @textinput-padding;
  outline: none;
}
// ------- 按钮：文字颜色、边框在 class 中自定义，.btn-bg() 等中只含背景的定义
@btn-shadow: inset 0 2px 4px #c5c5c5; //btn 内阴影
@btn-font-color: @color;
.btn-bg() {
  background-color: #fff;
  .gradient-0_8();
}
// hover、focus - 可覆盖 btn 中样式
@btn-hover-font-color: @color;
.btn-hover-bg() {
  .gradient-0_6();
}
// active-可覆盖 btn 中样式
@btn-activer-font-color: @sel-color;
.btn-active-bg() {
  background-color: @sel-bg;
}
.btn-disabled-bg() {
  background-color: @disable-bg;
}
// primary 按钮样式（可以覆盖 btn 中字体背景等各种样式）
.btn-primary-style() {
  .gradient_nomal();
}
.btn-primary-hover-style() {
  .gradient_hover();
}
.btn-primary-active-style(){}
@btn-icon-size: 15px;// 按钮中图片尺寸
/* ---------------------------------------------- */
@accordion-border-size: @border-size;// js emptyHeight
@accordion-border: solid @accordion-border-size @border-c;
@accordion-head-font-size: 15px;// head 部分字号
.accordion-head-style(){
  background-color: @title-bg;
}
.accordion-head-hover-style(){
  background-color: @highlight-bg;
  color: @highlight-bg-c;
}

@carousel-ctrl-size: 30px;// 箭头尺寸
@carousel-ctrl-color: #fff;// 箭头颜色
.carousel-ctrl-left-bg(){
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0%), color-stop(rgba(0, 0, 0, 0) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-ctrl-right-bg(){
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0) 0%), color-stop(rgba(0, 0, 0, .5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
@carousel-li-size: 10px;// circle 大小
@carousel-li-color: #fff;// circle 颜色
@carousel-li-light-color: rgba(256, 256, 256, .3);// circle 颜色
@carousel-li-border-size: @border-size;// slide 中边框尺寸

@combobox-border-size: @border-size;
@combobox-border: solid @combobox-border-size @border-c;
@combobox-arrow-w: @textinput-h;

@datagrid-border-size: @border-size; // js 中 dgborder
.datagrid-head-style(){
  background-color: @title-bg;
  .gradient-0_8();
}
@datagrid-td-border: dotted @border-size @border-c;
@datagrid-lockcol-bg: #fafafa;// 锁定列
@datagrid-lockcol-color: @color;
@datagrid-keycol-w: 30px;// checkbox、id 列
@datagrid-page-h: 30px;// js 翻页行高度
@datagrid-arrow-size: 4px;// 排序箭头大小

@dialog-head-h: 30px;// 标题部分字号变化时需修改，同时修改 js 中常量
.dialog-head-style(){
  font-size: @font-size;
  font-weight: bold;
  color: @title-color;
  background-color: @title-bg;
  .gradient-0_6();
}
@dialog-cont-icon-size: 35px;// dialog 中的 icon (info , error)
.dialog-toolbar-style(){
  //    border-top: solid @border-size @border-c;// 工具栏分隔线
  background: @tool-bg;
}

@dividedbox-barSize: 4px; //resizebar 的尺寸 * js:barSize *
@dividedbox-head-h: 25px; // head 高度
@dividedbox-iconSize: 15px;// head 中 icon 及 coll 的尺寸
@dividedbox-headmargin: 5px;// head 各部分的 margin
@dividedbox-ctrl-bg: #e5e5e5;// ctrl 悬停时背景色
// 标题部分及 resizebar
@dividedbox-title-bg: @title-bg;
@dividedbox-title-border-c: @border-c;
@dividedbox-coll-font-size: @font-l-size;
.dividedbox-coll-style(){
  background: @dividedbox-title-bg;
}
@dividedbox-line: @dividedbox-title-border-c @border-size solid; // 分隔线边框、collapse 下边框

@imageview-picbox-bg: rgba(0, 0, 0, .75);// imageview 背景
@imageview-close-bg: rgba(0, 0, 0, .01);// 关闭按钮背景
@imageview-toolbar-bg: rgba(0, 0, 0, .7);// imageview 背景
@imageview-radius: @border-radius;

@menu-sub-position: calc(~"100% - 5px");// 子菜单弹出偏移
@menu-bg: @bg;
@menu-item-border-size: @border-size;// * js:divBorderSize *
@menu-border: @menu-item-border-size solid @border-c;
@menu-in-line:  @border-size solid @border-c;
@menu-toolbar-h: 29px;// * js:toolbarHeight *
@menu-page-size: 18px;// 翻页图标大小
@menu-page-margin: 3px; // 翻页图标左右留白
@menu-empty-ul-h: 6px; // * js:emptyUlHeight *
@menu-li-w: 160px;// * js:liWidth *
@menu-li-h: 25px;// * js:liHeight *

@messagetip-head-h: @dialog-head-h;
.messagetip-head-style(){
  .dialog-head-style();
}

@panel-head-h: @dialog-head-h;// js panel 头部高度
@panel-tool-top: 2px; // 头部工具栏 top 位置
@panel-border: solid 1px @border-c;
.panel-head-style(){
  font-size: 15px;
  background-color: @title-bg;
  .gradient-0_6();
}

// 影响 popupbutton、combobox 弹出 menu 的高度计算 += 2 * (@popup-menu-bsize + @popup-menu-padding)
@popup-menu-bsize: 1px;// popup-menu 边框
@popup-menu-padding: 5px;// popup-menu 上下内边距

@popupbutton-arrow-w: @textinput-h; // 通常情况随 textinput 变化，不需修改

@progress-bar-w: 100px;
@progress-bar-h: 9px;// 影响 progress，居中显示时的 line-height: initH
@progress-bar-bg: @highlight-bg;
@progress-bcolor: #ddd;
@progress-fbg: #f5f5f5;
.progress-bg-wave(){
  background-image: -webkit-linear-gradient(45deg,@progress-fbg 24%,transparent 25%,transparent 49%,@progress-fbg 50%,@progress-fbg 74%,transparent 75%);
  background-image: -o-linear-gradient(45deg,@progress-fbg 24%,transparent 25%,transparent 49%,@progress-fbg 50%,@progress-fbg 74%,transparent 75%);
  background-image: linear-gradient(45deg,@progress-fbg 24%,transparent 25%,transparent 49%,@progress-fbg 50%,@progress-fbg 74%,transparent 75%);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}
.progress-bg-stage(){
  background-repeat: no-repeat;
  background-image: -webkit-linear-gradient(left,transparent,@progress-fbg);
  background-image: -o-linear-gradient(left,transparent,@progress-fbg);
  background-image: linear-gradient(to right,transparent,@progress-fbg);
}

@searchinput-border-size: @border-size;
@searchinput-border: solid @searchinput-border-size @border-c;
@searchinput-h: @textinput-h;

@tabset-padding: 0;// wi-tabset 的内边距
.tabset-style(){
  //    .gradient-0_8(top, bottom);
  background-color: @bg;
  //    border: solid 1px @border-c;
}
@tab-margin: 2px;// 标签页之间间距 * js:liAfter *
@tab-ctrl-size: 27px;
@tabset-arrow-color: @tool-color; // defaultbar 箭头颜色
@tabset-arrow-hover-color: @tool-hover-color;  // defaultbar 箭头悬浮颜色
@tab-bsize: @border-size;// 所有 tab 边框尺寸
// 普通标签页
@tab-color: @color;
.tab-style(@from: top, @to: bottom){
  border: solid @tab-bsize @border-c;
  color: @tab-color;
  background-color: @title-bg;
  .gradient-0_8(@from, @to);
}
// 禁用标签页
.tab-disable(){
  .disabled();
}
// 鼠标悬停标签页
.tab-hover-style(@from: top, @to: bottom){
  border-color: @hover-border-c;// 与普通 tab 相同时省略
  color: @hover-color;// 与普通 tab 相同时省略
  //    background-color: #7bd2f6;// 与普通 tab 相同时省略
  .gradient-0_6(@from, @to);// 与普通 tab 相同时省略
}
// 选中标签页
@tab-active-border: solid @tab-bsize @hover-border-c;// 选中项边框、line 边框、cont 边框
@tabset-active-color: @color; // 选中的 tab 页文字颜色
.tab-active-style(@from: top, @to: bottom){
  border: @tab-active-border;
  background: @bg;// 若需渐变可调用 .gradient-0_8()
  color: @tabset-active-color;
}
.tabset-cont-border(){
  border: @tab-active-border;// 无边框时省略
}

@tooltip-bg: @bg;
@tooltip-border-color: @border-c;

@tree-item-h: 22px;
@tree-icon-size: 22px;